<!-- 标注标签 -->
<template>
  <a-dropdown :get-popup-container="(triggerNode: any) => triggerNode.parentNode">
    <div class="dmp-label" :style="style" @click="onClick" @mouseenter="onMouseenter">
      <p :title="title">
        <slot> {{ title }}</slot>
      </p>
      <div v-if="showRemoveButton" class="remove" @click.stop="handleRemove">
        <i class="iconfont icon-close-circle-fill"></i>
      </div>
    </div>
    <template #overlay v-if="showDropdown">
      <div v-if="showDrop" class="dmp-label-dropdown-wrap">单击标签可进行修改</div>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
  import { uuid } from 'g6-fn'
  import { computed, getCurrentInstance, onUnmounted, ref } from 'vue'

  import { hexToRgb } from '@/utils/index'

  import { DmpLabelProps } from '../types/index'

  const props = withDefaults(defineProps<DmpLabelProps>(), {
    id: Date.now().toString(),
    onlyId: uuid(),
    title: '',
    color: '#1868E9',
    height: '22px',
    showRemoveButton: true,
    borderRadius: '2px',
    showDropdown: false,
    maxWidth: '200px'
  })

  const showDrop = ref(props.showDropdown)

  const emits = defineEmits<{
    (event: 'unmounted'): void
    (event: 'remove', data: any, e: any): void
  }>()

  const handleRemove = (e: any) => {
    emits('remove', props.data, e)
  }

  const onClick = () => {
    showDrop.value = false
  }

  const onMouseenter = () => {
    showDrop.value = true
  }

  const style = computed(() => ({
    color: hexToRgb(props.color),
    background: hexToRgb(props.color, 0.08),
    height: props.height,
    borderRadius: props.borderRadius,
    'max-width': props?.maxWidth || '100%'
  }))

  onUnmounted(() => {
    const instance = getCurrentInstance()
    if (instance) {
      instance.emit('unmounted')
    }
  })
</script>

<style lang="less" scoped>
  .dmp-label {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 6px;
    width: 100%;
    min-width: 0;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    cursor: pointer;
    line-height: 22px;

    > p {
      font-weight: 400;
      .elliptical-1();
    }

    .remove {
      position: absolute;
      top: -10px;
      right: -10px;
      display: none;

      > i {
        font-size: 14px;
        color: rgba(17, 22, 31, 0.75);
      }
    }

    &:hover {
      .remove {
        display: block;
      }
    }
  }

  .dmp-label-dropdown-wrap {
    padding: 4px 8px;
    width: 140px;
    font-size: 12px;
    color: @text01;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(37, 37, 45, 0.14), 0 2px 8px 0 rgba(37, 37, 45, 0.14);
    font-weight: 400;
    line-height: 20px;
  }
</style>
